<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1 id="app">{{name}}</h1>
    <input type="text" placeholder="尊姓大名" id="myInput"/>
    <script>
        //判断是否是对象
         function isObject(value){
            return typeof value === 'object' && value !== null
         }
        /**
         * 创建响应式数据
         * @param [object]: 普通对象
         * @return [Proxy]: 代理对象
         */
        function reactive(obj){
          if(!isObject(obj)) return;
          
          return new Proxy(obj,{
            get(target,key){
              return target[key]
            },
            set(target,key,value){
              target[key] = value;
              effect()   //调用副作用函数，重新设置新的值
              return true;
            }
          })
        }
       
        //将对象设置为响应式数据
        const data = reactive( { name : 'xiaohong' } )
        //!!!副作用函数
        function effect(){
            app.innerHTML = data.name
        }
        
        //单响应(输入名字时...)
        myInput.addEventListener("keyup",(event) => {
             data.name = myInput.value
        })
        
        
    </script>
  </body>
</html>